import { Modal, Store, Toggle } from "../../core";

import PropertiesModal from "./PropertiesModal";
import ShowPropertiesButton from "./ShowPropertiesButton";
import StoreProps from "./StoreProps";
import useDocument from "./useDocument";
import { FC, ReactElement } from "react";

export interface RenderShowPropertiesProps {
  onClick(): void;
}

type RenderShowProperties = (props: RenderShowPropertiesProps) => ReactElement;

export interface ShowPropertiesProps {
  children?: RenderShowProperties;
}

const ShowProperties: FC<{
  children?: RenderShowProperties;
  store: Store<StoreProps>;
}> = ({ children, store }) => {
  const { currentDoc } = useDocument(store);
  const fileName = store.get("fileName") || "";

  const defaultChildren = (props: RenderShowPropertiesProps) => (
    <ShowPropertiesButton {...props} />
  );
  const render = children || defaultChildren;

  return currentDoc ? (
    <Modal
      target={(toggle: Toggle) =>
        render({
          onClick: toggle,
        })
      }
      content={(toggle: Toggle) => (
        <PropertiesModal
          doc={currentDoc}
          fileName={fileName}
          onToggle={toggle}
        />
      )}
      closeOnClickOutside={true}
      closeOnEscape={true}
    />
  ) : (
    <></>
  );
};

export default ShowProperties;
